<template>
    <div>
        <div class="header">
            <div class="header-title">
                <span @click="toHome">
                    开化是个好地方
                </span>
                <div class="headerContentLeftInfo">
                    <div class="header-date"  @click="getCenter"
                        v-clipboard:copy="copyCenter" 
                        v-clipboard:success="onCopy" >
                        {{ year }} &nbsp;&nbsp;&nbsp; {{ week }}
                    </div>
                    <!-- <div class="header-time">
                        {{ time }}
                    </div> -->
                    <div class="header-weather">
                        {{type}}/{{wendu}}°C
                    </div>
                    <div>
                        AQI: {{aqi}} {{quality}}
                    </div>
                    <!-- <div class="header-tool1" @click="getCenter"
                        v-clipboard:copy="copyCenter" 
                        v-clipboard:success="onCopy" 
                    >
                        获取中心点
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            copyCenter:null,
            year:null,
            week:null,
            time:null,
            type:null,
            wendu:null,
            aqi:null,
            quality:null,
            rongyu:[
                "革命老区县","国家生态县","中国白颈长尾雉之乡","中国清水鱼之乡","中国天然氧吧","国家园林县城","国家卫生县城","钱江源国家公园体制试点","中国清水鱼之乡","中国天然氧吧","国家园林县城","国家卫生县城","钱江源国家公园体制试点"
            ]
        }
    },
    mounted(){
        this.getDate()
        this.initWeather()
    },
    methods:{
        toHome(){
            this.$router.push('/')
        },
        changeLabelProvider(){

        },
        getCenter(){
            this.copyCenter = this.$cp.getCenter();
        },
        onCopy(){
            this.$message({
                message: '已复制到粘贴板',
                type: 'success'
            });
        },
        getDate() {
			setInterval(() => {
				const date = new Date()
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()
				const month = date.getMonth() + 1
				const today = date.getDate()
				this.time = timeToString(hour) + ':' + timeToString(minute) + ':' + timeToString(second)
				this.year = date.getFullYear() + '-' + timeToString(month) + '-' + timeToString(today)
                //const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
                const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				this.week = weekday[date.getDay()]
				function timeToString(nowTime) {
					if (nowTime < 10) {
						return '0' + nowTime
					} else {
						return '' + nowTime
					}
				}
			}, 1000)
        },
        initWeather() {
			axios.get('/api' + '101211001').then(res => {
                let data = res.data.data
                this.quality = data.quality
                this.wendu = data.wendu
                this.type = data.forecast[0].type
                this.aqi = data.forecast[0].aqi
            })
		}
    }
}
</script>

<style lang="stylus" scoped>
    @import '../../assets/css/varibles.styl'
    .header
        width:100vw
        height:vh(60)
        background:rgba(0,0,0,.3)
        z-index:10
        position:absolute
        top:0
        left:0
        background: #011740
        .header-title
            width:100vw
            height:vh(60)
            line-height:vh(60)
            font-size:vw(30)
            text-align:center
            position:absolute
            z-index:101
            background:url('/images/headerbg.png') no-repeat
            background-size:cover
            span
                background-image :linear-gradient(to bottom, #FFFFFF , #1BFBFF )
                background-clip :text
                font-weight:600
                letter-spacing:10px;
                color:transparent
            .headerContentLeftInfo
                    width:vw(530)
                    height:vh(60)
                    position:absolute
                    left:0
                    top:0
                    line-height :vh(78)
                    display:flex
                    justify-content :space-around
                    z-index:99
                    color: #30AAB5
                    font-size:vw(18)
                    padding-right:vw(20)
</style>